<template>
	<view>
		<uni-section title="设备号" type="line" padding>
			<template v-slot:right>
				<view style="display: flex;justify-content: space-between;">
					<view></view>
					<view>
						<uni-icons type="scan" size="24" @click="saoma"></uni-icons>
					</view>
				</view>
			</template>
			<uni-easyinput v-model="formOptions.mac" placeholder="请输入内容"></uni-easyinput>
		</uni-section>
		<!-- <uni-section title="设备密码" type="line" padding>
			<uni-easyinput type="password" v-model="formOptions.device_pwd" placeholder="设备密码"></uni-easyinput>
		</uni-section> -->
		<uni-section title="设备图片" type="line" padding>
			<view class="dxImg" @click="shangChuan" v-if="formOptions.device_img"
				:style="{backgroundImage:`url(${formOptions.device_img})`}">

			</view>
			<view class="dxImg" v-else @click="shangChuan">
				<uni-icons type="cloud-upload" size="26"></uni-icons>
			</view>
		</uni-section>
		<uni-section title="设备取名" type="line" padding>
			<uni-easyinput v-model="formOptions.device_name" placeholder="设备取名"></uni-easyinput>
		</uni-section>

		<uni-section title="安装地址" type="line" padding>
			<view>
				<!-- <uni-data-select v-model="cityOption.sheng" :localdata="shengOption" @change="change"></uni-data-select>
				<uni-data-select v-model="cityOption.sheng" :localdata="shengOption" @change="change"></uni-data-select>
				<uni-data-select v-model="cityOption.sheng" :localdata="shengOption" @change="change"></uni-data-select> -->
				<picker mode="multiSelector" placeholder="请选择地址" @columnchange="bindMultiPickerColumnChange"
					:value="multiIndex" :range="multiArray">
					<view class="uni-input">
						<text
							style="font-size: 24rpx;color: #999999;">点击选择：</text>{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
					</view>
				</picker>
			</view>

			<uni-easyinput v-model="formOptions.device_address" placeholder="安装地址"></uni-easyinput>

		</uni-section>
	</view>
	<view style="text-align: center;margin-top: 100rpx;">
		<text class="btns" @click="saveNext">保存并进入下一步</text>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import config from "@/config/config.js"
	import {
		addBindDevice
	} from "@/api/wuLian.js"
	import * as chinaJson from "/static/china.json"
	import {
		getUser,checkUserRedirect
	} from '../../utils/token';
	let user
	onShow(() => {
		user = getUser()
		checkUserRedirect(user)
		formOptions.customer_id = user.id
		console.log("走了")
		
	})
	let shengArr = Object.keys(chinaJson.default)

	const shengOption = reactive([{
		value: '',
		text: '请选择'
	}])
	for (let i = 0; i < shengArr.length; i++) {
		shengOption.push({
			value: shengArr[i],
			text: shengArr[i]
		})
	}

	function saveNext() {
		const params = {
			...formOptions,
			device_address: `${tempArr.join(" ")} ${formOptions.device_address}`
		}
		addBindDevice(params).then(e => {
			console.log(e, 96)
			if(e.code==0){
				uni.navigateTo({
					url: "/dianXiang/pages/settingWifi?mac="+params.mac
				})
			}else{
				uni.showToast({
					title: e.msg,
					icon: 'none'
				})
			}
		})
	}
	const formOptions = reactive({
		device_name: '',
		mac: '',
		device_pwd: '',
		device_img: '',
		device_address: '',
		customer_id: 0
	})
	const cityOption = reactive({
		sheng: '',
		shi: '',
		qu: ''
	})
	const title = '添加设备';
	const value = ref("")
	const password = ref("")
	const placeholderStyle = ref("color:#E60012;font-size:14px")
	const styles = ref({
		color: '#E60012',
		borderColor: '#E60012'
	})

	function onchange(e) {
		const value = e.detail.value
		console.log(e)
	}

	function onnodeclick(node) {
		console.log(node)
	}

	function input(e) {
		console.log('输入内容：', e);
	}

	function saoma() {
		uni.scanCode({
			success: function(res) {
				console.log('条码类型：' + res.scanType);
				console.log('条码内容：' + res.result);
				formOptions.mac = res.result
			}
		});
	}

	function iconClick(type) {
		uni.showToast({
			title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
			icon: 'none'
		})
	}

	function shangChuan() {
		uni.chooseImage({
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				uni.uploadFile({
					url: config.BASE_URL + '/wxapp/upload', //仅为示例，非真实的接口地址
					filePath: tempFilePaths[0],
					name: 'file',
					success: (uploadFileRes) => {
						let res = JSON.parse(uploadFileRes.data)
						formOptions.device_img = res.data.path
						// console.log(formOptions, 136)
					}
				});
			}
		});
	}
	const multiArray = ref([
		shengArr,
		Object.keys(chinaJson.default[shengArr[0]]),
		chinaJson.default[shengArr[0]]['市辖区']
	])
	const multiIndex = ref([0, 0, 0])

	function bindPickerChange(e) {
		console.log('picker发送选择改变，携带值为：' + e.detail.value)
		// index = e.detail.value
	}
	const tempArr = reactive(['北京市', '市辖区', '东城区'])
	const shiArr = ref([])
	const quArr = ref([])

	function bindMultiPickerColumnChange(e) {
		console.log(e.detail, 161)
		multiIndex.value[e.detail.column] = e.detail.value
		switch (e.detail.column) {
			case 0: //拖动第1列
				tempArr[0] = shengArr[e.detail.value]
				multiArray.value[1] = Object.keys(chinaJson.default[shengArr[e.detail.value]])
				shiArr.value = Object.keys(chinaJson.default[shengArr[e.detail.value]])
				tempArr[1] = multiArray.value[1][0]
				tempArr[2] = Object.keys(chinaJson.default[shengArr[e.detail.value]][multiArray.value[1][0]]) //
				multiArray.value[2] = chinaJson.default[tempArr[0]][tempArr[1]]
				quArr.value = multiArray.value[2]
				tempArr[2] = quArr.value[0]
				break
			case 1: //拖动第2列
				multiArray.value[2] = chinaJson.default[tempArr[0]][shiArr.value[e.detail.value]]
				tempArr[1] = shiArr.value[e.detail.value]
				quArr.value = multiArray.value[2]
				break
			case 2: //拖动第3列
				tempArr[2] = quArr.value[e.detail.value]
				break
		}
	}

	function bindDateChange(e) {
		date = e.detail.value
	}

	function bindTimeChange(e) {
		time = e.detail.value
	}
</script>

<style scoped>
	.uni-mt-5 {
		margin-top: 5px;
	}

	.btns {
		background-color: #E60012;
		color: #fff;
		padding: 20rpx 40rpx;
		font-size: 26rpx;
		border-radius: 10rpx;
	}

	.dxImg {
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100rpx;
		height: 100rpx;
		border: 1rpx solid #ccc;
	}

	.uni-input {
		padding: 20rpx 20rpx;
		border: 1rpx solid #e5e5e5;
		border-radius: 5rpx;
		margin-bottom: 10rpx;
	}
</style>